<template>
	<view class="list" v-if="list.length > 0">
		<view v-for="(item,index) in list" :key="index">


			<navigator style="background: #fff;" :url="'/pages/article/activitydetail/activitydetail?id='+item.id" class="item"
				hover-class="none">
				<view class="title"
					style="line-height: 46px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
					<span
						style="border-radius: 4px; border: #EA9B37 solid 1px; color: #EA9B37; padding: 0px 4px; font-size: 10px; margin-right: 6px;">置顶</span>
					{{ item.title }}
				</view>
				<view style="width: 100%; height: 140px; overflow: hidden; border-radius: 6px;">
					<image v-if="item.type!=2" style="width: 100%;" :src="item.images" mode="widthFix"></image>
					<image v-else style="width: 100%;" :src="item.video+'?vframe/jpg/offset/1'" mode="widthFix"></image>
				</view>
				<view style="line-height: 30px;">
					<image style="width: 12px; vertical-align: -2px; margin-right: 10px; height: 16px;"
						src="/static/1.png"></image> 活动类型：{{item.activity_type}}
				</view>
				
				<view style="line-height: 30px;" >
					<image style="width: 12px; vertical-align: -2px; margin-right: 10px; height: 12px;"
						src="/static/2(1).png"></image>
						<text v-if="type == 'myActivity'">
							活动时间：{{item.activity_time}}
						</text>	
						<text v-else>
							活动时间：{{item.activity_time|formatDates}}
						</text>	
						<!-- <text v-if="item.activity_time > 1000">
							活动时间：{{formatDates(item.activity_time)}}
						</text>	 -->
				</view>
				<view style="line-height: 30px;">
					<image style="width: 12px; vertical-align: -2px; margin-right: 10px; height: 16px;"
						src="/static/3(1).png"></image>活动地点：{{item.activity_place}}
				</view>


				<view class="line"></view>
			</navigator>
		</view>
		<!-- <navigator  style="background: #fff;"  url="/pages/article/activitydetail/activitydetail" class="item" v-for="(item, index) in list" :key="index" hover-class="none">
			<view class="title" style="line-height: 46px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
			<span style="border-radius: 8px; border: #EA9B37 solid 1px; color: #EA9B37; padding: 4px 8px; font-size: 12px; margin-right: 6px;">置顶</span>{{ item.title }}
			</view>
			<view style="display: flex;text-align: center;">
				<view class="listboxlist" style=" flex:1; height: 86px;margin-right:10px; overflow: hidden; border-radius: 6px;">
					<image style="width: 100%;" :src="item.photo_url" mode="widthFix"></image>
				</view>
				<view class="listboxlist" style=" flex:1; height: 86px;margin-right: 10px; overflow: hidden; border-radius: 6px;">
					<image style="width: 100%;" :src="item.photo_url" mode="widthFix"></image>
				</view>
				<view class="listboxlist" style="flex:1; height: 86px;margin-right: 10px; overflow: hidden; border-radius: 6px;">
					<image style="width: 100%;" :src="item.photo_url" mode="widthFix"></image>
				</view>
			</view>
			
			<view class="line"></view>
		</navigator> -->
		<!-- <navigator  style="background: #fff;"  url="/pages/article/activitydetail/activitydetail" class="item" v-for="(item, index) in list" :key="index" hover-class="none">
			<view class="info">
				<view class="text">
					<view class="title">{{ item.title }}</view>
					<view class="other">
						<view class="left">
							<view class="source" v-if="item.source">{{ item.source }}</view>
							<view class="time">{{ item.create_time }}</view>
						</view>
						<view class="right" v-if="item.comment_count > 0">
							<image src="/static/images/icon_comment.png"></image>
							<text>{{ item.comment_count }}</text>
						</view>
						<view class="right view" v-else>
							<image src="/static/images/icon_view.png"></image>
							<text>{{ item.read }}</text>
						</view>
					</view>
				</view>
				<view class="photo"><image :src="item.photo_url" mode="aspectFill"></image></view>
			</view>
			<view class="line"></view>
		</navigator> -->
		<!-- <navigator  style="background: #fff;"  url="/pages/article/activitydetail/activitydetail" class="item" v-for="(item, index) in list" :key="index" hover-class="none">
			<view class="info">
				<view class="photo"><image :src="item.photo_url" mode="aspectFill"></image></view>
				<view class="text"  style="margin-right:0; margin-left: 22px;">
					<view class="title">{{ item.title }}</view>
					<view class="other">
						<view class="left">
							<view class="source" v-if="item.source">{{ item.source }}</view>
							<view class="time">{{ item.create_time }}</view>
						</view>
						<view class="left" v-if="item.comment_count > 0">
							<image src="/static/images/icon_comment.png"></image>
							<text>{{ item.comment_count }}</text>
						</view>
						<view class="left view" v-else>
							<image src="/static/images/icon_view.png"></image>
							<text>{{ item.read }}</text>
						</view>
					</view>
				</view>
				
			</view>
			<view class="line"></view>
		</navigator> -->
	</view>
</template>

<script>
	// export default {
	// 	name: 'articleList',
	// 	data() {
	// 		list:[
	// 			{
	// 				title:'杨幂吴亦凡玩鳄鱼玩具，太过投入差点领错奖，网友：两个幼稚鬼',
	// 				source:'猫眼电影',
	// 				create_time:'2020-12-21',
	// 				comment_count:'',
	// 				read:'444',
	// 				photo_url:'https://pic.rmb.bdstatic.com/bjh/down/50fceb9013d48f7aeb03e40659db5e7d.jpeg@c_1,w_408,h_272,x_88,y_81'

	// 			}
	// 		]
	// 	}
	// };
import {formatDate} from '@/common/time.js'
	export default {
		name: 'nearlist',
		props: ['list', 'type'],
		data() {
			return {
				list: this.list
			};
		},
		filters:{
			formatDates(e){
				return formatDate(parseInt(e)*1000,'ymdhm')
			}
		},
		onShow() {

		},
		onShareAppMessage() {

		},
		onLoad(e) {

		},
		onPullDownRefresh() {

		},
		methods: {

		}
	};
</script>
<style>
	.listboxlist:nth-last-child(1) {

		margin-right: 0 !important;

	}
</style>
<style lang="scss">
	/*文章列表*/
	.list {
		margin-top: 2rpx;

		.item {
			padding: 40rpx 24rpx 0 24rpx;

			.info {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding-bottom: 4rpx;

				.text {
					flex-grow: 1;
					flex-shrink: 1;
					display: flex;
					flex-direction: column;
					margin-right: 40rpx;

					.title {
						flex-grow: 1;
						flex-shrink: 1;
						font-size: 34rpx;
						line-height: 1.5;
						display: -webkit-box;
						text-overflow: ellipsis;
						word-break: break-all;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						height: 72rpx;
						margin-bottom: 8rpx;
					}

					.other {
						flex-grow: 1;
						flex-shrink: 1;
						display: flex;
						align-items: center;
						font-size: 28rpx;
						color: #999;
						line-height: normal;

						.left {
							display: flex;
							flex-grow: 1;
							flex-shrink: 1;

							.source {
								display: -webkit-box;
								text-overflow: ellipsis;
								word-break: break-all;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
								overflow: hidden;
								width: 140rpx;
								margin-right: 16rpx;
							}
						}

						.right {
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;
							flex-grow: 0;
							flex-shrink: 0;
							margin-right: 5rpx;

							image {
								flex-grow: 1;
								flex-shrink: 1;
								width: 28rpx;
								height: 28rpx;
								margin-right: 12rpx;
							}

							text {
								flex-grow: 1;
								flex-shrink: 1;
								margin-top: -6rpx;
							}
						}

						.view {
							image {
								width: 40rpx;
								height: 40rpx;
								margin-right: 5rpx;
							}
						}

						// .listboxlist{

						// }
					}
				}

				.photo {
					image {
						height: 170rpx;
						width: 222rpx;
						border-radius: 10rpx;
					}
				}
			}

			.line {
				display: bock;
				width: 100%;
				height: 1rpx;
				margin-top: 22rpx;
				background: #ccc;
				position: relative;
				z-index: 1;
				transform: scaleY(0.3);
			}

			&:last-child {
				.line {
					//display: none;
				}

				//padding-bottom: 30rpx;
			}
		}
	}
</style>
